


<!-- 组件 / 文本 -->
<module-text>
  <style scoped>
  :scope{position: relative;}
  </style>
  <div style="padding: 5px; color: {content.cstyle.fcolor}; border: {content.mstyle.border}">
    <overlayer/>
    {content.text}
  </div>
  <script>
    var tag = this;
    tag.content = opts.content;
    tag.fn = {};
    tag.on('mount', function(){
      if(!tag.content.text){
        tag.content.text = '这是文本模块，点击即可进行编辑...';
        tag.update();
      }
    });
    tag.on('edit', function(){
      opts.onEdit && opts.onEdit(tag.content);
    });
    tag.on('remove', function(){
      opts.onRemove && opts.onRemove(tag.content);
    });
  </script>
</module-text>



<!-- 编辑区域 -->
<editor>
  <style scoped>
  :scope .tab li{cursor: pointer; display: inline-block; padding: 5px 10px; border: 1px solid #ccc}
  </style>

  <ul class="tab">
    <li each="{tabList}" onclick="{fn.onTab}">{text}</li>
  </ul>

  <div if="{tab=='content'}">
    <!-- 文本模块 -->
    <div class="content-text">
      <textarea style="width: 50%; height: 200px;" ref="text" if="{item.type=='text'}">{item.text}</textarea>
    </div>
  </div>

  <div if="{tab=='style'}">
    <!-- 样式编辑 -->
    <h4>文字颜色</h4>
    <p>
      <input ref="fcolor" type="text" value="{item.cstyle.fcolor}">
    </p>
  </div>

  <div if="{tab=='module'}">
    <!-- 容器样式 -->
    <h4>边框</h4>
    <p>
      <input ref="border" type="text" value="{item.mstyle.border}">
    </p>
  </div>

  <p>
    <button type="button" onclick="{fn.onSave}">保存</button>
  </p>

  <script>
    var tag = this;
    tag.item = {};
    tag.tabList = [
      {name: 'content', text: '内容编辑'},
      {name: 'style', text: '内容样式'},
      {name: 'module', text: '模块设置'}
    ];
    tag.tab = 'content';
    tag.fn = {
      onTab: function(e){
        tag.tab = e.item.name;
      },
      onSave: function(){
        if(tag.refs.text) tag.item.text = tag.refs.text.value;
        if(tag.refs.fcolor) tag.item.cstyle.fcolor = tag.refs.fcolor.value;
        if(tag.refs.border) tag.item.mstyle.border = tag.refs.border.value;
        tag.emit('save', tag.item);
      }
    };
    tag.on('mount', function(){
    });
    tag.on('edit', function(item){
      tag.update({
        item: item
      });
    })
  </script>
</editor>

<test-index>

  <style scoped>
  #layout{min-height: 20px; border: 2px dashed #ccc; padding: 5px;}
  </style>

  <h2>布局demo</h2>
  <sortable sort-ref="titles" group="{{name: 'list', put: ['modules']}}" drag-handle=".drag" on-update="{fn.onUpdate}" on-add="{fn.onAdd}"/>
  <div id="layout" ref="titles">
    <div each="{item in itemList}">
      <div class="module-content" if="{item.type}" data-is="module-{item.type}" content="{item}" on-edit="{fn.onEdit}" on-remove="{fn.onRemove}"></div>
    </div>
  </div>
  <br>
  <br>
  <h2>组件demo</h2>
  <draggable-modules ref="modules"/>
  <br>
  <br>
  <h2>编辑区域</h2>
  <editor ref="editor" if="{editItem.type}"/>

  <script>
  var tag = this;
  tag.itemList = [];
  tag.editItem = {};
  tag.fn = {
    onEdit: function(item){
      var index = tag.itemList.indexOf(item);

      tag.update({
        editItem: item
      });

      tag.refs.editor
      .emit('edit', item)
      .once('save', function(item){
        tag.itemList[index] = item;
        tag.editItem = {};
        tag.update();
      });
    },
    onRemove: function(item){
      tag.itemList.splice(tag.itemList.indexOf(item), 1);
      tag.update();
    },
    onUpdate: function(e){
      pip.arr.move(tag.itemList, e.oldIndex, e.newIndex);
    },
    onAdd: function(e){
      var index = [].slice.call(tag.refs.titles.children).indexOf(e.item);
      tag.refs.titles.removeChild(e.item);
      tag.refs.modules.once('dragEnd', function(item){
        tag.itemList.splice(index, 0, {
          id: tag.itemList.length+1,
          type: item.name,
          cstyle: {
            fcolor: '#666'
          },
          mstyle: {
            border: '0px'
          }
        });
        tag.update();
      });
    }
  };
  tag.on('mount', function(){

  });
  </script>
</test-index>
